<template>
  <div class="recommend-songs">
    <div class="intro">
      <div class="date">
        <div class="week">{{ getWeek() }}</div>
        <div class="day">{{ getDate() }}</div>
      </div>
      <div class="info">
        <div class="name">每日歌曲推荐</div>
        <div class="desc">根据您的音乐口味生成，每日6:00更新</div>
      </div>
    </div>
    <div class="tracks">
      <div class="tracks-top">
        <div class="item">
          <a-button-group>
            <a-button type="primary" icon="play-circle" @click="play(songs,0)">播放全部</a-button>
            <a-button type="primary" icon="plus" title="添加所有到播放列表" @click="addToList" />
          </a-button-group>
        </div>

        <div class="item">
          <a-button :disabled="!songs.length || loading" :icon="subIcon" @click="subscribe">收藏全部</a-button>
        </div>
      </div>
      <track-list :isShowHead="false" :tracks="songs" @dblclick="play" @download="download" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getRecommendSongs, createPlaylist, addSongToList } from '@/api/user'
import { normalSong } from '@/utils/song'
import TrackList from '@/components/Common/track-list/index.js'
import { uniqueData } from '@/utils/assist'
export default {
  name: 'daily',
  data () {
    return {
      songs: [],
      loading: false,
      pid: ''
    }
  },
  computed: {
    ...mapGetters('play', [
      'mode',
      'current_song_index',
      'current_play_list',
      'playing',
      'current_song',
      'history_play_list',
      'fullscreen',
      'current_lyric'
    ]),
    ...mapGetters('User', [
      'userPlaylists', 'likedsongIds'
    ]),
    subIcon () {
      return this.likedsongIds.includes(this.pid) ? 'check' : 'folder-add'
    }
  },
  components: {
    TrackList
  },
  activated () {
    if (!this.songs.length) {
      this.getSongs()
    }
  },
  methods: {
    getSongs () {
      getRecommendSongs().then(res => {
        this.songs = res.data.dailySongs.map(song => {
          return normalSong(song)
        })
      })
    },
    async subscribe (op, tracks, pid) {
      try {
        this.loading = true
        const date = new Date()
        const name = `每日歌曲推荐(${date.getFullYear()}.${this._pad(date.getMonth() + 1)}.${this._pad(date.getDate())})`
        let { code, playlist } = await createPlaylist({ name })
        if (code) {
          let op = 'add'
          let pid = playlist.id
          let tracks = this.songs.map(song => {
            return song.id
          })
          let res = await addSongToList({ op, tracks: tracks.join(','), pid })
          console.log(res)
          this.pid = pid
          this.$message.success('收藏成功')
          this.$store.dispatch('User/getUserPlaylists')
          // let userPlaylists = this.userPlaylists.slice()
          // userPlaylists.push(playlist)
          // this.$store.commit('User/SET_USER_PLAYLISTS', userPlaylists)
        }
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
        this.$message.error('收藏失败')
      }
      // createPlaylist()
    },
    _pad (num) {
      return num < 10 ? '0' + num : num
    },
    play (tracks, index) {
      this.$store.dispatch('play/selectPlay', { tracks, index })
    },
    addToList () {
      let current_play_list = this.current_play_list.slice()
      let list = current_play_list.concat(this.songs)
      list = uniqueData(list)
      this.$store.commit('play/SET_CURRENT_PLAY_LIST', list)
    },
    download (song) {
      this.$store.dispatch('Download/download', song)
    },
    getWeek () {
      return '星期' + '日一二三四五六'.charAt(new Date().getDay())
    },
    getDate () {
      return new Date().getDate()
    }
  }
}
</script>

<style lang="less" scoped>
.recommend-songs {
  padding: 30px;
  .intro {
    display: flex;
    margin-bottom: 10px;
    .date {
      width: 110px;
      height: 110px;
      flex: 0 0 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid #eee;
      background: #fff;
      line-height: 1;
      .week {
        font-size: 16px;
      }
      .day {
        font-size: 60px;
        color: @primary-color;
      }
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 15px;
      .name {
        margin: 10px 0;
        font-family: "Microsoft JhengHei", "明黑", Arial, Helvetica;
        font-size: 28px;
      }
    }
  }
  .tracks {
    border: 1px solid #ececec;
    .tracks-top {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
  }
}
</style>
